<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <!-- 双括号表达式  Mustache语法 -->
        <h1>{{msg}}</h1>
        <!-- 使用指令 v-开头就是指令-->
        <!-- v-text将变量或者表达式作为字符串解析 -->
        <h1 v-text="msg2"></h1>
        <!-- v-html将其作为html代码解析 -->
        <h1 v-html="msg2"></h1>
        <!-- v-text和v-html谁安全（innerText和innerHtml谁安全）
            v-text 安全  v-html不安全
         -->
         <h2 v-text="msg3.toUpperCase()"></h2>
         <h1>-------</h1>
         <!--  -->
         <h1>{{msg}}</h1>
         <!-- v-once实现的是一次性插入，当值再次发生改变时，它不再更改 -->
         <h1 v-once>{{msg}}</h1>

         <!-- v-bind供标签上的属性使用 -->
         <div title="title效果">title</div>
         <a href="http://baidu.com">百度一下</a>
         <!--通过v-bind绑定的标签上的属性后面的值即为变量或者表达式   -->
         <!-- html attribute -->
         <div v-bind:title = 'msg'>title</div>
         <a v-bind:href="url">百度一下</a>

         <a v-bind:href="url">{{msg}}</a>
         <!-- 简写方式 -->
         <a :href="url">{{msg}}</a>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                msg:'国庆节快乐吗？？',
                msg2:'<div>快乐的不只是一丢丢！！！</div>',
                msg3:'hiogjeoigj',
                url:'http://baidu.com'
            }
        })
    </script>
</body>
</html>